<template>
  <div class="row-between" style="padding: 20px">
    <div><slot></slot></div>
    <el-pagination
      @size-change="paginationChange($event, 'pageSize')"
      @current-change="paginationChange($event, 'pageNum')"
      :current-page="value.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="value.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="value.total - 0">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'Pagination',
    props: {
      value: Object
    },
    methods: {
      paginationChange (event, key) {
        const formData = JSON.parse(JSON.stringify(this.$props.value))
        formData[key] = event
        this.$emit('input', formData)
        this.$emit('change')
      },
    }
  }
</script>

<style scoped>

</style>
